<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>刘苗苗Web前端求职简历</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/resume.css">
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header id="header">
    <nav id="navbar" class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#intro">欢迎</a></li>
                    <li><a href="#skill">关于技能</a></li>
                    <li><a href="#education">教育背景</a></li>
                    <li><a href="#basic">基本信息</a></li>
                    <li><a href="#about">联系方式</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="intro">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="caption  text-center">
                        <h1 class="h3 name animated slideInRight"><small>姓名：</small>刘苗苗</h1>
                        <h3 class="h3 job animated slideInLeft"><small>求职：</small>Web前端</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<a class="arrow bounce" href="#skill">
    <i class="fa fa-chevron-down fa-2x" aria-hidden="true"></i>
</a>
<div id="skill" class="stage text-center">
    <div class="container toggleOpacity">
        <h3 id="animated_h3" class="">关于技能</h3>
        <ul>
            <li>
                <div class="item item-1">
                    <div class="item-info">
                        <h4>HTML5</h4>
                        <p>熟练掌握</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="item item-2">
                    <div class="item-info">
                        <h4>CSS3</h4>
                        <p>熟练掌握</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="item item-3">
                    <div class="item-info">
                        <h4>ES5/ES6</h4>
                        <p>熟练掌握</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="item item-4">
                    <div class="item-info">
                        <h4>Angular2</h4>
                        <p>熟练</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="item item-5">
                    <div class="item-info">
                        <h4>TypeScript</h4>
                        <p>熟练</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="item item-6">
                    <div class="item-info">
                        <h4>Bootstrap</h4>
                        <p>熟练掌握</p>
                    </div>
                </div>
            </li>
        </ul>
        <a href="#moreSkill"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></a>
    </div>
</div>
<div id="education">
    <div id="book">
        <article>
            <header class="post-header" id="post-header">
                <h3 class="post-title">教育背景</h3>
            </header>
            <div class="post-content" id="post-content">
                <p class="text-center">
                    <h3>太原大同大学</h3>
                    <h3><small>大学本科</small></h3>
                    <h3><small>2014年7月毕业</small></h3>
                </p> 
            </div>
        </article>
    </div>
</div>
<div id="moreSkill" class="text-center">
    <h3><span>更多技能</span></h3>
    <div class="container">
        <div class="row">
            <div class="avatar col-lg-4">
                <div id="btn1"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>
                <div id="stageBody">
                    <p><img src="images/jQuery-logo.jpg"></p>
                    <p><img src="images/angular-logo.jpg"></p>
                    <p><img src="images/TypeScript-logo.png"></p>
                    <p><img src="images/Ajax-logo.jpg"></p>
                    <p><img src="images/css3-logo.jpg"></p>
                    <p><img src="images/html-logo.jpg"></p>
                </div>
                <div id="btn2"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></div>
            </div>
            <div class="left col-lg-2 col-sm-2">
                <p class="skill toggleOpacity">jQuery</p>
                <p class="skill toggleOpacity">AJAX</p>
                <p class="skill toggleOpacity">Flex</p>
                <p class="skill toggleOpacity">Http</p>
                <p class="skill toggleOpacity">CSS3</p>
                <p class="skill toggleOpacity">SPA</p>
                <p class="skill toggleOpacity">Canvas</p>
                <p class="skill toggleOpacity">NPM</p>
                <p class="skill toggleOpacity">nodejs</p>
                <p class="skill toggleOpacity">SASS</p>
            </div>
            <div class="right col-lg-6 col-sm-10">
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100" style="width: 96%">
                        <span class="sr-only">96% Complete (success)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (danger)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                        <span class="sr-only">80% Complete (warning)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
                        <span class="sr-only">75% Complete (warning)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100" style="width: 88%">
                        <span class="sr-only">96% Complete (success)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
                        <span class="sr-only">95% info</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                        <span class="sr-only">80% Complete (warning)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                        <span class="sr-only">50% Complete (danger)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                        <span class="sr-only">30% Complete (danger)</span>
                    </div>
                </div>
                <div class="progress toggleOpacity">
                    <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (warning)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="picture"></div>
<div id="basic">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-lg-6">
                <article>
                    <header class="header"><h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;个人信息</h3></header>
                    <div class="content">
                        <p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>&nbsp;&nbsp;姓名：刘苗苗</p>
                        <p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>&nbsp;&nbsp;性别：男&nbsp;&nbsp;&nbsp;&nbsp;年龄：23岁</p>
                        <p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>&nbsp;&nbsp;工作年限：2年</p>
                        <p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>&nbsp;&nbsp;求职意向：Web前端工程师</p>
                    </div>
                </article>
                <article>
                    <header class="header"><h3><span class="glyphicon glyphicon-tag" aria-hidden="true"></span>&nbsp;自我评价</h3></header>
                    <div class="content">
                        <p><span class="badge">1</span>&nbsp;&nbsp;学习能力强，爱专研，能融会贯通各知识点，形象记忆</p>
                        <p><span class="badge">2</span>&nbsp;&nbsp;具有优良的职业道德操守和团队合作精神</p>
                        <p><span class="badge">3</span>&nbsp;&nbsp;热爱前端工作，对工作有高度责任心</p>
                        <p><span class="badge">4</span>&nbsp;&nbsp;喜欢学习各种新兴框架，新技术</p>
                        <p><span class="badge">5</span>&nbsp;&nbsp;具有良好的业务逻辑分析能力、抽象能力</p>
                    </div>
                </article>
            </div>
            <div class="col-sm-6 col-lg-6">
                <article>
                    <header class="header"><h3><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>&nbsp;个人项目</h3></header>
                    <div class="content">
                        <h4><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;&nbsp;高仿CNode社区  单页面应用</h4>&nbsp;&nbsp;
                        <p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>&nbsp;&nbsp;开发环境：Visual Studio Code + Chrome</p>
                        <p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>&nbsp;&nbsp;开发技术：Angular2 + HTML5 + CSS3</p>
                        <p><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>&nbsp;&nbsp;项目描述：</p>
                        <p class="text-indent">CNode 社区为国内最专业的 Node.js 开源技术社区。该项目是对官网的高仿。内容主要有：网站首页，文章页面，个人信息页面，登录与退出模块跳转等。</p>
                        <p><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>&nbsp;&nbsp;项目技术：</p>
                        <p><span class="badge">1</span>&nbsp;&nbsp;登录注册页面主要用到localStorage本地存储实现页面通信</p>
                        <p><span class="badge">2</span>&nbsp;&nbsp;运用Angular模块进行布局，CSS3特效渲染</p>
                        <p><span class="badge">3</span>&nbsp;&nbsp;运用Chrome浏览器调试工具进行调试</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
<footer id="about">
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-lg-9">
                <article>
                    <header class="header"><h4>联系方式</h4></header>
                    <div class="content">
                        <p><span class="glyphicon glyphicon-phone" aria-hidden="true"></span>&nbsp;手机：15321586921</p>
                        <p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp;邮箱：1351919693@qq.com</p>
                        <p><i class="fa fa-qq"></i>&nbsp;QQ：1351919693</p>
                        <p><i class="fa fa-weixin"></i>&nbsp;微信：lmm15321586921</p>
                        
                    </div>
                </article>
            </div>
            <div class="col-sm-3 col-lg-3">
                <article>
                    <div class="content">
                       
                    </div>
                </article>
            </div>
        </div>
    </div>
</footer>

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/toggle.js"></script>
</body>
</html>
